<template>
  <div class="app-container">
    <div class="currency-balanceTotal-container">
      <div class="currency-balanceTotal-info">
        <div class="balance-title">资产总额</div>
        <div>
          <span class="balance-total">{{ balanceTotal }}</span>
          <span class="balance-update-time">（更新于 {{ parseTime(updateTime) }}）</span>
          <span><el-button type="text" icon="el-icon-refresh" @click="getLeptageList">刷新</el-button></span>
        </div>
      </div>
    </div>
    <div class="currency-balance-container">
      <div v-for="(item, index) in currencyList" :key="index">
        <el-card shadow="hover" class="currency-card">
          <div class="currency-icon">
            <img :src="item.flagSrc" alt="Currency Flag" />
          </div>
          <div class="currency-info">
            <div class="currency-name">{{ item.currency }} {{ item.currencyName }}</div>
            <div class="currency-amount">{{ item.amount }}</div>
            <div class="currency-label">可用金额</div>
          </div>
        </el-card>
      </div>
    </div>
    <el-tabs v-model="tabsActiveName" @tab-click="handleClick">
      <el-tab-pane label="划转历史" name="transfer">
        <el-form :model="transferQueryParams" ref="transferQueryParams" :inline="true">
          <el-form-item label="交易编号:" prop="requestId">
            <el-input size="mini" v-model="transferQueryParams.requestId" placeholder="请输入交易编号" clearable />
          </el-form-item>
          <el-form-item label="方向:" prop="direction">
            <el-select size="mini" v-model="transferQueryParams.direction" placeholder="请选择方向">
              <el-option
                v-for="dict in dict.type.direction"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态:" prop="status">
            <el-select size="mini" v-model="transferQueryParams.status" placeholder="请选择状态">
              <el-option
                v-for="dict in dict.type.transfer_status"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="币种:" prop="ccy">
            <el-input size="mini" v-model="transferQueryParams.ccy" placeholder="请输入币种" clearable />
          </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="transferDataList">
          <el-table-column label="序号" type="index" align="center" min-width="5%"/>
          <el-table-column label="交易编号" align="center" prop="requestId" key="requestId"/>
          <el-table-column label="方向" align="center" prop="direction" key="direction">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.direction" :value="scope.row.direction"/>
            </template>
          </el-table-column>
          <el-table-column label="币种" align="center" prop="ccy" key="ccy"/>
          <el-table-column label="链" align="center" prop="chain" key="chain"/>
          <el-table-column label="数量" align="center" prop="amount" key="amount"/>
          <el-table-column label="状态" align="center" prop="status" key="status">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.crypto_trade_status" :value="scope.row.status"/>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center" prop="createdAt">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createdAt) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="完成时间" align="center" prop="completedAt">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.completedAt) }}</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="transferTotal>0"
          :total="transferTotal"
          :page.sync="transferQueryParams.pageNum"
          :limit.sync="transferQueryParams.pageSize"
          @pagination="getTransformDataList"
        />
      </el-tab-pane>
      <el-tab-pane label="换汇历史" name="exchange">
        <el-form :model="exchangeQueryParams" ref="exchangeQueryParams" :inline="true">
          <el-form-item label="交易编号:" prop="txnId">
            <el-input size="mini" v-model="exchangeQueryParams.txnId" placeholder="请输入交易编号" clearable />
          </el-form-item>
          <el-form-item label="币种树:" prop="ccyPair">
            <el-input size="mini" v-model="exchangeQueryParams.ccyPair" placeholder="请输入币种树" clearable />
          </el-form-item>
          <el-form-item label="状态:" prop="status">
            <el-select size="mini" v-model="exchangeQueryParams.status" placeholder="请选择状态">
              <el-option
                v-for="dict in dict.type.transfer_status"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="exchangeDataList">
          <el-table-column label="序号" type="index" align="center" min-width="5%"/>
          <el-table-column label="交易编号" align="center" prop="txnId" key="txnId"/>
          <el-table-column label="币种树" align="center" prop="ccyPair" key="ccyPair"/>
          <el-table-column label="报价" align="center" prop="price" key="price"/>
          <el-table-column label="卖出金额" align="center" prop="sellAmount" key="sellAmount"/>
          <el-table-column label="买入金额" align="center" prop="buyAmount" key="buyAmount"/>
          <el-table-column label="状态" align="center" prop="status" key="status">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.crypto_trade_status" :value="scope.row.status"/>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center" prop="createdAt">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createdAt) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="完成时间" align="center" prop="completedAt">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.completedAt) }}</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="exchangeTotal>0"
          :total="exchangeTotal"
          :page.sync="exchangeQueryParams.pageNum"
          :limit.sync="exchangeQueryParams.pageSize"
          @pagination="getExchangeDataList"
        />
      </el-tab-pane>
      <el-tab-pane label="提现历史" name="withdraw">
        <el-form :model="withdrawQueryParams" ref="withdrawQueryParams" :inline="true">
          <el-form-item label="交易编号:" prop="requestId">
            <el-input size="mini" v-model="withdrawQueryParams.requestId" placeholder="请输入交易编号" clearable />
          </el-form-item>
          <el-form-item label="状态:" prop="status">
            <el-select size="mini" v-model="withdrawQueryParams.status" placeholder="请选择状态">
              <el-option
                v-for="dict in dict.type.crypto_trade_status"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="提现币种:" prop="withdrawalMoneyCcy">
            <el-input size="mini" v-model="withdrawQueryParams.withdrawalMoneyCcy" placeholder="请输入提现币种" clearable />
          </el-form-item>
          <el-form-item label="出金币种:" prop="payoutMoneyCcy">
            <el-input size="mini" v-model="withdrawQueryParams.payoutMoneyCcy" placeholder="请输入出金币种" clearable />
          </el-form-item>
          <el-form-item label="扣费币种:" prop="feeMoneyCcy">
            <el-input size="mini" v-model="withdrawQueryParams.feeMoneyCcy" placeholder="请输入扣费币种" clearable />
          </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="withdrawDataList">
          <el-table-column label="序号" type="index" align="center" min-width="5%"/>
          <el-table-column label="交易编号" align="center" prop="requestId" key="requestId"/>
          <el-table-column label="提现币种" align="center" prop="withdrawalMoneyCcy" key="withdrawalMoneyCcy"/>
          <el-table-column label="提现金额" align="center" prop="withdrawalMoneyAmount" key="withdrawalMoneyAmount"/>
          <el-table-column label="出金币种" align="center" prop="payoutMoneyCcy" key="payoutMoneyCcy"/>
          <el-table-column label="出金金额" align="center" prop="payoutMoneyAmount" key="payoutMoneyAmount"/>
          <el-table-column label="扣费币种" align="center" prop="feeMoneyCcy" key="feeMoneyCcy"/>
          <el-table-column label="扣费金额" align="center" prop="feeMoneyAmount" key="feeMoneyAmount"/>
          <el-table-column label="状态" align="center" prop="status" key="status">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.crypto_trade_status" :value="scope.row.status"/>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center" prop="createdAt">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createdAt) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="结算时间" align="center" prop="settledAt">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.settledAt) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="完成时间" align="center" prop="completedAt">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.completedAt) }}</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="withdrawTotal>0"
          :total="withdrawTotal"
          :page.sync="withdrawQueryParams.pageNum"
          :limit.sync="withdrawQueryParams.pageSize"
          @pagination="getWithdrawDataList"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { leptageList,transferPageList,withdrawPageList,exchangePageList } from '@/api/triones/globalAccount'
export default {
  name: "index",
  dicts: ['crypto_trade_status','transfer_status','direction'],
  data() {
    return {
      tabsActiveName: 'transfer',
      currencyList: [],
      balanceTotal: 0,
      updateTime: 0,
      loading: false,
      transferQueryParams: {
        pageNum: 1,
        pageSize: 10
      },
      transferDataList: [],
      transferTotal: 0,
      withdrawQueryParams: {
        pageNum: 1,
        pageSize: 10
      },
      withdrawDataList: [],
      withdrawTotal: 0,
      exchangeQueryParams: {
        pageNum: 1,
        pageSize: 10
      },
      exchangeDataList: [],
      exchangeTotal: 0,
    }
  },
  created() {
    this.getLeptageList();
    this.getTransformDataList();
  },
  methods: {
    /** 切换标签页 */
    handleClick(tab, event) {
      if (tab.name === 'transfer') {
        this.getTransformDataList();
      }
      if (tab.name === 'exchange') {
        this.getExchangeDataList();
      }
      if (tab.name === 'withdraw') {
        this.getWithdrawDataList();
      }
    },
    getLeptageList() {
      leptageList().then(res => {
        this.currencyList = res.data || [];
        // 计算 amount 字段的总和并保留两位小数
        let totalAmount = this.currencyList.reduce((acc, item) => {
          if (item.amount) {
            const amountValue = parseFloat(item.amount.replace(/,/g, ''));
            return acc + (isNaN(amountValue) ? 0 : amountValue);
          }
          return acc;
        }, 0);
        // 使用 toFixed(2) 保留两位小数，并转换回数字类型（避免字符串类型）
        this.balanceTotal = parseFloat(totalAmount).toFixed(2);
        this.updateTime = res.data && res.data[0] && res.data[0].updateTime || '';
      });
    },
    /** 提现列表 */
    getWithdrawDataList() {
      this.loading = true;
      withdrawPageList(this.withdrawQueryParams).then(res => {
        this.withdrawDataList = res.rows;
        this.withdrawTotal = res.total;
        this.loading = false;
      });
    },
    /** 划转列表 */
    getTransformDataList() {
      this.loading = true;
      transferPageList(this.transferQueryParams).then(res => {
        this.transferDataList = res.rows;
        this.transferTotal = res.total;
        this.loading = false;
      });
    },
    /** 换汇列表 */
    getExchangeDataList() {
      this.loading = true;
      exchangePageList(this.exchangeQueryParams).then(res => {
        this.exchangeDataList = res.rows;
        this.exchangeTotal = res.total;
        this.loading = false;
      });
    }
  }
}
</script>
<style scoped lang="scss">
.currency-balanceTotal-container {
  margin-bottom: 20px;
  padding: 20px;
  display: flex;
  align-items: center; // 垂直居中对齐
  .currency-balanceTotal-info {
    .balance-title {
      font-weight: bold;
      font-size: 16px;
      color: #333;
      margin-bottom: 10px;
    }
    .balance-total {
      font-size: 24px;
      font-weight: normal;
    }
    .balance-update-time {
      font-size: 14px;
      color: #999;
      margin-top: 10px;
    }
  }
}
.currency-balance-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
  .currency-card {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border-radius: 8px;
    background-color: #f5f5f5;
    height: 200px;
    width: 200px;
    .currency-icon {
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
      }
    }

    .currency-info {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-top: 10px;
      .currency-name {
        font-size: 14px;
        color: #666;
        margin-bottom: 10px;
      }

      .currency-amount {
        font-size: 24px;
        font-weight: bold;
        color: #333;
        margin-bottom: 5px;
      }

      .currency-label {
        font-size: 12px;
        color: #999;
      }
    }
  }
}
</style>


